<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/radioLib/jquery-labelauty.css"/>
<script type="text/javascript" src="<%=basePath%>/lib/radioLib/jquery-labelauty.js"></script>

<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/js/vue.min.js"></script>

<link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/lpro/multiSelect/multi-select.css"/>
<script type="text/javascript" src="<%=basePath%>/lib/lpro/multiSelect/multi-select.js"></script>

<style type="text/css">
	
	.dashboard-menu{
		border-top:1px solid #ecf0f5;
	}
	.app-container{
		width: 100%;
	}
	
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
		width:800px;
		margin: 0 auto;
	}
	.sceneList-info{
		padding-top: 10px;
		padding-left: 10px;
	}
	.p-title{
		padding: 20px 0;
		font-size: 18px;
	}
	ul.dowebok  { list-style-type: none ;}
	.dowebok li { display: inline-block; margin-right: 10px;}
	input.labelauty + label { font: 12px "Microsoft Yahei";}
</style>
</head>
<body>
	<div>
		<div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							<div class="clearfix" style="width: 600px;margin: 0 auto;">
								<div>
									<p class="p-title">Add trigger information</p>
								</div>
								<div id="add-trigger" config-option=" url:'/trigger',
												  submit:'.save-Btn',prev_sumit_func:'initvalue',  success:'sunccessReturn'">
								<div id="modify-trigger" 
											config-option="url:'/trigger',method:'put',prev_sumit_func:'initvalue',submit:'.save-Btn',success:'sunccessReturn'">
									<div id="detail_get" config-option=" 'url':'/trigger?id=$#init-id$' ,'success':'initTrigger' ">
									<input type="hidden" type-name="id" id="init-id" >
									<input type="hidden" class="scene_id">
									
									<div class="clearfix">
										<div class="form-line float-left" style="width: 32%;">
											<span class="red">*</span>&nbsp;<span>Trigger Name:</span>
											<div class="pb-10 pt-10">
												<input placeholder="Trigger Name" validate="empty:Please enter name" type-name="name" class="input input-big " >
											</div>	
										</div>
										<div class="form-line float-left" style="width: 32%;margin-left: 2%;">
	                                         <span class="red">*</span>&nbsp;<span>Device:</span>
	                                         <div class="pb-10 pt-10" id="nodeVue">
	                                             <input type="hidden" v-model="selectNode"
	                                                    type-name="node_id">
	                                             <select v-model="selectNode" type-name="node_id" validate="empty:Please select a gateway"
	                                                     onchange="nodeChange(this);"
	                                                     class="input input-big input-select">
	                                                 <option value="">Please select device</option>
	                                                 <option v-for="item in nodeList" :value="item.id">
	                                                     {{item.name}}
	                                                 </option>
	                                             </select>
	                                         </div>
	                                    </div>
	                                    <div class="form-line float-left" style="width: 32%;margin-left: 2%;">
	                                         <span class="red">*</span>&nbsp;<span>Sensor:</span>
	                                         <div class="pb-10 pt-10" id="sensorVue">
	                                             <input type="hidden" v-model="selectSensor"
	                                                    type-name="from_sensor_id">
	                                             <select v-model="selectSensor"
	                                                     validate="empty:Please select sensor"
	                                                     class="input input-big input-select">
	                                                 <option value="">Please select sensor</option>
	                                                 <option v-for="item in sensorList" :value="item.id">
	                                                     {{item.name}}
	                                                 </option>
	                                             </select>
	                                         </div>
	                                     </div>
									</div>
									
									<div class="form-line">
										<span class="red">*</span>&nbsp;<span>Trigger type:</span>
										<div class="pb-10 pt-10">
											<select type-name="iot_trigger_condition_type" onchange="conditionChange(this);" validate="empty:Condition type" 
												config-option="'method':'GET','url':'/dictionary/28','key':'code','value':'name',
													'init_value':'Please select a trigger type','type':'list' " class="input input-big input-select jui-selecter" ></select>
										</div>
									</div>
									<input type="hidden" type-name="condition_params"  >
									<div class="clearfix">
										<div class="form-line x-type hide float-left" style="width: 49%;margin-right: 2%;">
											<span>X：</span>
											<div class="pb-10 pt-10">
												<input placeholder="X"  class="input input-big condition_params" >
											</div>
										</div>
										<div class="form-line y-type hide float-left" style="width: 49%;">
											<span>Y：</span>
											<div class="pb-10 pt-10">
												<input placeholder="Y"  class="input input-big condition_params" >
											</div>
										</div>
										<div class="form-line m-type hide float-left" style="width: 49%;">
											<span>M：</span>
											<div class="pb-10 pt-10">
												<input placeholder="M"  class="input input-big condition_params" >
											</div>
										</div>
									</div>
									
									<input type="hidden" type-name="iot_trigger_action_type"  >
									<div class="form-line">
										<span>Type of action:</span>
										<div class="pb-10 pt-10">
											<div class="clearfloat multi-checkbox" >
												<ul class="dowebok">
												</ul>
											</div>
										</div>
									</div>
									<input type="hidden" type-name="action_params"  >
									<div class="clearfix">
										<div class="form-line device_type hide float-left" style="width: 49%;margin-right: 2%;">
											<span class="red">*</span>&nbsp;<span>Joint control equipment:</span>
											<div class="pb-10 pt-10">
												<select  config-option="  url:'/page/sensor?paged=1&pageSize=100',key:'id',
														value:'node_name,name',init_value:'Please select a joint control device',data:{ scene_id:'$.scene_id$',iot_sensor_type:27 } " class="input input-select input-big action_params control_device jui-selecter" ></select>
											</div>
										</div>
										<div class="form-line device_type hide float-left" style="width: 49%;">
											<span class="red">*</span>&nbsp;<span>Joint control equipment action:</span>
											<div class="pb-10 pt-10">
												<select  type-option="selecter" 
													config-option="'method':'GET','url':'/dictionary/35',
														'key':'code','value':'name','type':'list' " class="input input-big control_device_status action_params input-select" ></select>
											</div>
										</div>
									</div>
									
									<div class="form-line contactuserInfo-type hide">
										<span>Contact information:</span>
										<div class="pb-10 pt-10" style="position: relative;">
											<input class="drop-header action_params_self" style="height: 45px;" 
													placeholder="Please select an alarm contact" id="multiSelect"  />
										</div>
									</div>
									
									<div class="clearfix">
										<div class="form-line float-left" style="width: 32%;">
											<span class="red">*</span>&nbsp;<span>Generate alarm information:</span>
											<div class="pb-10 pt-10">
												<select type-name="iot_trigger_alarm_flag" onchange="sendAlarmInfo(this);" validate="empty:Alarm message"  type-option="selecter" 
													config-option="'method':'GET','url':'/dictionary/35','key':'code','value':'name',
														'type':'list' ,'default_value':'37' "  class="input input-big input-select" style="margin-top:3px;"></select>
											</div>
										</div>
										<div class="form-line float-left" style="width: 36%;margin-left: 2%;">
											<span class="red">*</span>&nbsp;<span>Cycle trigger interval[seconds]：</span>
											<div class="pb-10 pt-10">
												<input placeholder="0 does not loop trigger" validate="empty,num:Please enter the number" type-name="trigger_inteval_time" class="input input-big">
											</div>
										</div>
										<div class="form-line float-left" style="width: 26%;margin-left: 2%;">
											<span>Whether to enable:</span>
											<div class="pb-10 pt-10">
												<select style="margin-top:3px;" type-name="iot_trigger_status"  type-option="selecter" 
													config-option="'method':'GET','url':'/dictionary/42','key':'code','value':'name','type':'list' "  class="input input-big input-select" ></select>
											</div>
										</div>
										
									</div>
									
									<div class="clearfix">
										<div class="form-line alarm-level hide float-left" style="width: 49%;margin-right: 2%;">
											<span>Alarm level:</span>
											<div class="pb-10 pt-10">
												<select type-name="iot_trigger_alarm_level"  type-option="selecter" 
													config-option="'method':'GET','url':'/dictionary/38','key':'code','value':'name','type':'list' "  class="input input-big input-select" ></select>
											</div>
										</div>
										<div class="form-line float-left" style="width: 49%;">
											<span class="red">*</span>&nbsp;<span>Alarm recovery trigger:</span>
											<div class="pb-10 pt-10">
												<select type-name="recovery" validate="empty:Restore normal message sending"  type-option="selecter" 
														config-option="'method':'GET','url':'/dictionary/35','key':'code','value':'name',
															'type':'list' ,'default_value':'37' "  class="input input-big input-select" ></select>
											</div>
										</div>
									</div>
									
									<div class="form-line clearfix" style="padding-bottom: 20px;">
										<button onclick="returnBack()" class="cancel-btn button ml-20  border-gray button-big float-right">Cancel</button>
										<button class="save-Btn button bg-iot ml-10 button-big float-right">Save</button>
									</div>
									</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

var sensorVue = new Vue({
    el: '#sensorVue',
    data: function () {
        return {
            sensorList: [], 
            selectSensor: ""
        }
    },
    methods: {
        //获取设备
        getSensor: function (node_id) {
            var that = this
            var loading = layer.msg('Loading, please wait...', {icon: 16, time: false, shade: 0.1})
            postAjax(localUrl + "/page/sensor?paged=1&pageSize=100",
                {node_id: node_id, data_type:-1},
                function (res) {
                    layer.close(loading)
                    if(res.status == 2){
	                    that.sensorList = res.data.data                     	
                    }else{
                    	that.sensorList = [] ;
                    }
                }
            )
        }
    }
})

var nodeVue = new Vue({
    el: '#nodeVue',
    data: function () {
        return {
            nodeList: [],
            selectNode: "" 
        }
    },
    methods: {
        //获取设备
        getNode: function () {
            var that = this
            var scene_id = GetQueryString("id");
            postAjax(localUrl + "/page/node?paged=1&pageSize=100",
                {scene_id: scene_id},
                function (res) {
                	if(res.status == 2 ){
                		that.nodeList = res.data.data
                	}
                   	else{
                   		that.nodeList = [] ;
                   	}
                }
            )
        }
    },
    mounted: function () {
        this.getNode()
    }
})

function nodeChange(obj) {
    var val = $(obj).val();
    if (val == null || val.length <= 0) {
    	sensorVue.sensorList = []
    	sensorVue.selectSensor = ""
    } else {
    	sensorVue.getSensor(val)
    }
}


function sunccessReturn(){
	forwardUrl("/iot/trigger_manager?id="+GetQueryString("id"),1000,"Save successfully");	
}
function returnBack(){
	forwardUrl('/iot/trigger_manager?id='+GetQueryString("id"));
}
$(function(){
	// 初始化url参数
	var id = GetQueryString("id");
	$(".scene_id").val(id);
	
	var tid = GetQueryString("tid");
	if(validater.empty(tid)){
		manual_form_submit($("#add-trigger"))
	}else{
		$(".p-title").html("Edit trigger information");
		writeVal("init-id",tid);
		manual_form_submit($("#modify-trigger"));
		setTimeout(function(){
			manual_init_detail_get($("#detail_get"));			
		}, 150);
	}
	
	domAjaxInit({
		'url':'/dictionary/49',
		'method':'GET',
		'selector' :'.dowebok',
		'getContent':function(obj){
			return '<li><input type="checkbox" class="actionTypeCheckBox" tag="'+ obj.code +'" name="checkbox" data-labelauty="'+ obj.name +'"></li>';
		},
		'success':function(){
			$('.multi-checkbox input').labelauty();
		}
	});
	
	// ajax 请求信息
	postAjax(localUrl+'/page/contact/user/info?paged=1&pageSize=100' , {},function(res){
		if(isOK(res)){
			var dataT = res.data.data ;
			var initD = {} ;
			for(var i=0; i< dataT.length; i++){
				initD[ dataT[i].name ]= {val: dataT[i].id } ;
			}
			dropDwon({
				id: 'multiSelect',
				myData: initD ,
				callBack:function(){
					console.log("init success");
				}
			});
		}
	}, function(){});
	
})

$(document).delegate(".actionTypeCheckBox","click",function(){
	var tmp = selArrayVal("#add-trigger input.actionTypeCheckBox");
	gic("iot_trigger_action_type","#add-trigger").val( tmp );
	if(tmp.indexOf('50') >-1 ){
		$("#add-trigger .device_type").show();
	}else{
		$("#add-trigger .device_type").hide();
	}
	if(tmp.indexOf('51')>-1 || tmp.indexOf('52')>-1 || tmp.indexOf('53')>-1 || tmp.indexOf('360')>-1 ){
		$("#add-trigger .contactuserInfo-type").show();
	}else{
		$("#add-trigger .contactuserInfo-type").hide();
		$("#multiSelect").attr("tag",'');
		$("#multiSelect").val('');
	}
});

function initTrigger(obj){
	// sensor 和 node 初始化
	sensorVue.getSensor(obj.data.node_id)
	sensorVue.selectSensor = obj.data.from_sensor_id ;
	nodeVue.selectNode = obj.data.node_id ;
	
	var val = obj.data.iot_trigger_condition_type ;
	condition_code(val);
	// 值初始化
	wrtArrayVal(obj.data.condition_params,"#modify-trigger .form-line input.condition_params");
	var trigger_types = obj.data.iot_trigger_action_type.split(",");
	for(var i=0;i<trigger_types.length;i++){
		$("input[tag='"+ trigger_types[i] +"']").attr("checked",true);
	}
	
	var tmp = gic("iot_trigger_action_type","#modify-trigger").val();
	if(tmp.indexOf('50') >-1 ){
		$("#modify-trigger .device_type").show();
	}else{
		$("#modify-trigger .device_type").hide();
	}
	if(tmp.indexOf('51')>-1 || tmp.indexOf('52')>-1 || 
				tmp.indexOf('53')>-1 || tmp.indexOf('360')>-1 ){
		$("#modify-trigger .contactuserInfo-type").show();
		// 如果这边有，则来更新联系人信息
		var contactUserInfos = getObj( obj.data.action_params )["contactor"].split(",") ;
		
		// ajax 请求信息
		postAjax(localUrl+'/page/contact/user/info?paged=1&pageSize=100' , {},function(res){
			if(isOK(res)){
				var dataT = res.data.data ;
				var initD = {} ;
				for(var i=0; i< dataT.length; i++){
					var flag = false ;
					for(var j=0;j< contactUserInfos.length;j++ ){
						if( dataT[i].id == parseInt( contactUserInfos[j])  ){
							flag =true ;
							continue ;
						}
					}
					initD[ dataT[i].name ]= {val: dataT[i].id ,selected:flag } ;
				}
				dropDwon({
					id: 'multiSelect',
					myData: initD ,
					callBack:function(){
						console.log("init success");
					}
				});
			}
		}, function(){});
		
	}else{
		$("#modify-trigger .contactuserInfo-type").hide();
	}
	
	// 这边是初始化
	$(".control_device").val(  getObj( obj.data.action_params )["control_device"]);
	$(".control_device_status").val(  getObj( obj.data.action_params )["control_device_status"]);
	
	if(obj.data.iot_trigger_alarm_flag == 36){
		$(".alarm-level").show(); 
		gsc("iot_trigger_alarm_level").val(obj.data.iot_trigger_alarm_level); 
	}
}

function conditionChange(obj){
	$(".x-type,.y-type,.m-type").hide();
	var val = $(obj).val() ;
	condition_code(val);
}

function condition_code(val){
	if(val == 29  ){
		$(".x-type").show();
	}else if(val == 30){
		$(".y-type").show();
	}else if(val == 31 || val == 189 || val == 111 || val == 112 ){
		$(".x-type,.y-type").show();
	}else if(val == 32){
		$(".x-type").show();
	}else if(val == 33){
		$(".x-type,.m-type").show();
	}else if(val == 34){
		$(".x-type,.m-type").show();
	}else if( val == 280  || val== 110){
		$(".m-type").show();
	}
}

function initvalue(param){
	// 这里讲值写入到
	var tmp = {
			control_device: $(".control_device").val() ,
			control_device_status: $(".control_device_status").val() ,
			contactor: $("#multiSelect").attr("tag")
	}
	gic("action_params","#add-trigger").val( JSON.stringify(tmp) );
	return param ;
}

// condition_paran 有变化时候，记录到隐藏域中
$(document).delegate("#add-trigger .condition_params","change",function(){
	var tmp = selArrayVal("#add-trigger .form-line input.condition_params",'sel');
	gic("condition_params","#add-trigger").val( tmp );
});

function sendAlarmInfo(obj){
		$(".alarm-level").hide();
	if($(obj).val()==36){
		$(".alarm-level").show();
	}
}

function getObj(val){
	return eval( '('+ val +')');
}

</script>
</html>